<script setup></script>

<template>
  <div
    class="relative rounded-t-[120px] -mt-[306px] pt-[101px] z-[1] mx-auto bg-white w-full max-w-[calc(100%-128px)] md:-mt-52 lg:max-w-[calc(100%-32px)] lg:rounded-t-xl lg:pt-14 md:pt-5"
  >
    <div
      style="flex-direction: row"
      class="flex justify-between gap-20 items-center max-w-[1232px] px-4 mx-auto lg:gap-12 md:gap-6 md:flex-col-reverse [&amp;_div]:md:text-center"
    >
      <div class="relative">
        <img
          alt="无与伦比的 Undetectable AI 技术"
          loading="lazy"
          width="520"
          height="380"
          decoding="async"
          data-nimg="1"
          class="md:w-full rounded-lg overflow-hidden lg:w-[450px]"
          style="color: transparent"
          src="@/assets/img/ai-checker.webp"
          _mstalt="1005173"
          _msthash="77"
        />
      </div>
      <div class="flex-1 lg:w-full order-last">
        <h2 class="text-5xl font-bold lg:text-3xl md:text-2xl sm:text-xl">多合一 AI 检查器</h2>
        <div class="space-y-3 mt-3 sm:text-md sm:space-y-2 sm:mt-1">
          <p class="text-display-secondary">
            我们的 AI 检测器将 GPTZero、Copyleaks、ZeroGPT、Content at Scale 等领先的 AI
            检查器无缝结合到一个解决方案中，使您能够一次从多个检测器获得结果。
          </p>
        </div>
        <button
          class="px-8 w-fit text-white bg-[#165DFF] rounded-full font-semibold h-[64px] flex justify-center items-center mt-10 text-lg lg:mt-5 lg:mx-auto lg:text-md lg:h-12 btms"
        >
          免费查看您的文本
        </button>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.relative {
  position: relative;
}
.z-\[1\] {
  z-index: 1;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.w-full {
  width: 100%;
}
.max-w-\[calc\(100\%-128px\)\] {
  max-width: calc(100% - 128px);
}
.rounded-t-\[120px\] {
  border-top-left-radius: 120px;
  border-top-right-radius: 120px;
}
.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.pt-\[101px\] {
  padding-top: 101px;
}
.flex {
  display: flex;
}
.max-w-\[1232px\] {
  max-width: 1232px;
}
.items-center {
  align-items: center;
}
.justify-between {
  justify-content: space-between;
}
.gap-20 {
  gap: 5rem;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
audio,
canvas,
embed,
iframe,
img,
object,
svg,
video {
  display: block;
  vertical-align: middle;
}
img,
video {
  max-width: 100%;
  height: auto;
}
.overflow-hidden {
  overflow: hidden;
}
.rounded-lg {
  border-radius: 0.5rem;
}
.order-last {
  order: 9999;
}
.flex-1 {
  flex: 1 1 0%;
}
.text-5xl {
  font-size: 2.25rem;
  line-height: 3rem;
}
.font-bold {
  font-weight: 700;
}
.mt-3 {
  margin-top: 0.75rem;
}
.text-display-secondary {
    --ux-display-secondary: 103 119 136
    color: rgb(var(--ux-display-secondary));
}
.mt-10 {
    margin-top: 2.5rem;
}
.h-\[64px\] {
    height: 64px;
}
.w-fit {
    width: -moz-fit-content;
    width: fit-content;
}
.items-center {
    align-items: center;
}
.justify-center {
    justify-content: center;
}
.rounded-full {
    border-radius: 9999px;
}
.bg-\[\#165DFF\], .bg-\[\#165dff\] {
    --tw-bg-opacity: 1;
    background-color: rgb(22 93 255 / var(--tw-bg-opacity, 1));
}
.px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
}
.text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
}
.font-semibold {
    font-weight: 600;
}
.text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.btms{
    cursor: pointer;
    &:hover{
        --ux-primary: 58 126 255;
        --tw-bg-opacity: 1;
        background-color: rgb(var(--ux-primary) / var(--tw-bg-opacity, 1));
    }
}
.hover\:bg-primary:hover {
    --ux-primary: 58 126 255;
    --tw-bg-opacity: 1;
    background-color: rgb(var(--ux-primary) / var(--tw-bg-opacity, 1));
}
</style>
